<script setup lang='ts' name="rights-management">
import type { VxeGridInstance, VxeGridListeners } from 'vxe-table'

import { getMenuPageList, updateDeleteMenu } from '@fl/api/exploit-setting'
import ButtonItem from '@fl/components/button-item.vue'
import { ElButton, ElCard, ElMessage, ElMessageBox } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { ref, toRefs } from 'vue'

import addItem from './add.vue'
import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const props = withDefaults(defineProps<{
    data?: any
}>(), {
    data: {},
})
const { data } = toRefs(props)

const { btns, gridOptions } = useTable()
const { schema } = useForm()

const state = {
    menuName: '',
    status: '',
    updateTime: [],
}

const form = ref({
    ...state,
})

const appItem = ref({
    ...data.value,
})

const addDialog = ref(false)
const detail = ref<any>({})
const addItemRef = ref()
const xGrid = ref<VxeGridInstance<any>>()

const gridEvents: VxeGridListeners<any> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}

async function getData(val?: any) {
    gridOptions.loading = true
    const { menuName, status, updateTime: [startTime, endTime] } = form.value
    getMenuPageList({
        appCode: appItem.value.appCode,
        endTime,
        menuName,
        pageNum: gridOptions.pagerConfig.currentPage,
        pageSize: gridOptions.pagerConfig.pageSize,
        startTime,
        status,
        ...val,
    }).then((res: any) => {
        gridOptions.pagerConfig.total = res?.total ?? 0
        gridOptions.data = res?.data ?? []
    }).finally(() => {
        gridOptions.loading = false
    })
}

function search() {
    getData()
}
function reset() {
    form.value = {
        ...state,
    }
    getData()
}

function doAction(item: any, row: any) {
    switch (item.value) {
        case 'edit':
            detail.value = cloneDeep(row)
            addDialog.value = true
            addItemRef.value.init(false)
            break
        case 'delete':
            updateDeleteMenu({ id: row.id }).then(() => {
                ElMessage.success('操作成功')
                getData()
            })
            break
        default:
            break
    }
}

function view(url = '') {
    if (url)
        window.open(url, '_block')
}

function doAdd() {
    addDialog.value = true
    addItemRef.value.init()
}

watch(data, (val: any) => {
    if (val?.appCode) {
        appItem.value = val
        getData()
    }
}, {
    deep: true,
    immediate: true,
})

defineExpose({
    getData,
})
</script>

<template>
    <ElCard class="mb-20">
        <PlusForm v-model="form"
                  :row-props="{ gutter: 20 }"
                  :columns="schema"
        >
            <template #footer>
                <div class="ml-auto">
                    <ElButton type="primary"
                              @click="search"
                    >
                        查询
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm>
    </ElCard>

    <ElCard>
        <div class="mb-20">
            <ElButton type="primary"
                      @click="doAdd"
            >
                新增
            </ElButton>
        </div>
        <!-- 列表 -->
        <vxe-grid ref="xGrid"
                  v-bind="gridOptions"
                  v-on="gridEvents"
        >
            <template #status="{ row }">
                <ElButton v-if="row.status === 1"
                          style="color: #e9934f;border: 1px solid #e9934f;"
                          size="small"
                >
                    开发中
                </ElButton>

                <ElButton v-if="row.status === 2"
                          style="color: #2ba471;border: 1px solid #2ba471;"
                          size="small"
                >
                    已完成
                </ElButton>
            </template>

            <template #menuPath="{ row }">
                <div style="cursor: pointer;border-radius: 50%;"
                     h-30
                     w-30
                     @click="view(row.menuPath)"
                >
                    <img :src="row.menuPath"
                         style="width: 100%;height: 100%;"
                         alt=""
                    >
                </div>
            </template>

            <template #operate="{ row }">
                <ButtonItem :btns="btns"
                            @btn-click="doAction($event, row)"
                />
            </template>
        </vxe-grid>
    </ElCard>

    <addItem ref="addItemRef"
             v-model="addDialog"
             :data="detail"
             :app-item="appItem"
             @confirm="getData"
    />
</template>
